import React, { Component } from 'react';
import { List,Scroller } from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import thunk from 'redux-thunk';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware  } from 'redux';
import fetch from 'isomorphic-fetch';
import './index.scss';


// const fetchReducer =(state={},action={})=>{
// 	const{type,payload} = action;
// 	switch(type){
// 		case 'FETCH_DATA_START':
// 			return Object.assign({},state,{status:'数据请求中...'});
// 		case 'FETCH_DATA_FINISH':
// 			return Object.assign({},state,{status:'数据请求完成',list:payload});
// 		default:
// 			return state;
// 	}
// }
// const store = createStore(fetchReducer,applyMiddleware(thunk));


var My = React.createClass({
	getInitialState(){
		return{
			list:[{image:'ss',image1:'22'}]
		}
	},
	
	componentWillMount(){
		var self =this;
		fetch('../mock/work.json')
			.then(function (response) {
				return response.json()
			})
			.then(function (json) {
				self.setState({
					list:json
				})
			})
	},
	
	render() {
		this.state.list.map(function (val,index) {
			val.key = index+'work';
		})
		return (
            <div className="yo-flex">
    
                <Header title="个人经历" style={{height:44}} />
                <List
                    dataSource={this.state.list}
                    renderItem={(item,i)=>{
						return (
                            <div>
									<div className='flex'>
									   <div className="yo-card">
										   <div className="extra">
											   <img className="img-cover" src={item.image} />
										   </div>
										   <div className="bd">
											   <h3 className="title">{item.name}</h3>
											   <p className="desc">{item.category}</p>
										   </div>
									   </div>
									</div>
                                <p>
									{`担任职位:${item.reportto}`}
                                </p>
                                
                                <div style={{overflow:"hidden"}}>
                                    <dt className="img-wrap" style={{float:"left",width:"15%",marginTop:"2%",marginRight:"2%"}}>
                                        <List.LazyImage
                                            src={item.image1}
                                            defaultImage={null}
                                            style={{
												width: '100%',
												height: 60,
												
											}}
                                        />
										
                                    </dt>
									
                                    <dd style={{float:"left",width:"83%"}}>
                                        
                                        <p>
											{`团队人数:${item.peoples}`}
                                        </p>
                                        <p>
											{`任职时间:${item.time}`}
                                        </p>
                                        <p>
											{`参与的项目:${item.projects}`}
                                        </p>
                                    </dd>
									
                                </div>
                            </div>
						);
					}}
                    extraClass = {'yo-list-fullscreen'}
                />
            </div>
		)
	}
})



export default My;